/**
 * 电影详情页面
 * huruqing
 */


var filmDetail = {

    // 1. 获取数据
    getDetail: function() {
        var self = this;
        var url = 'http://huruqing.cn:3000/api/film/getDetail';
        $.ajax({
            type: 'get',
            url: url,
            // 请求参数
            data: {
                filmId: '5c934f35ba39c80073aa3dfd'
            },
            dataType: 'json',
            success: function(res) {
                console.log(res);
                // 如果code===666, 说明请求是成功的, 然后开始渲染页面
                if (res.code === '666') {
                    // 2. 调用渲染页面的函数
                    self.renderFilm(res.film);
                } else {
                    alert(res.msg);
                }

            }

        });

    },

    // 3.渲染电影详情
    renderFilm(film) {
        var self = this;
        var str = ` <header>
                        <img id="img" src="${film.poster}" class="w100pc">
                        <a class="fixed flex fcc" href="#">
                            <span class="icon iconfont">&#xe64b;</span>
                        </a>
                    </header>

                    <!-- 影片详情 -->
                    <main>
                        <div class="detail bg-fff ">
                            <div class="flex jc-sb lh15">
                                <p>
                                    <span class="f18 name">${film.name}</span>
                                    <span class="type">2D</span>
                                </p>
                                <p class="yellow"> <i class="f16">7</i> <span class="f12">分</span></p>
                            </div>
                            <p class="mt-10 f14 gray">剧情</p>
                            <p class="f14 gray mt-10">2019-03-22上映</p>
                            <p class="f14 gray mt-5">中国大陆 | 100分钟</p>
                            <p class="f14 gray mt-15 lh">${film.synopsis}</p>
                        </div>


                        <!-- 演职人员 -->
                        <div class="performer bg-fff mt-10">
                            <p class="font">演职人员</p>
                            <ul id="actors" class="flex ever">

                            </ul>
                        </div> 
                        </div>
                    </main>

                    <!-- 选座购票 -->
                    <p class="buttom">选座购票</p>`;
        // 渲染电影详情
        document.querySelector('#app').innerHTML = str;
        // 调用渲染演员列表的方法来展示演员列表
        self.renderActor(film.actors);
    },


    // 4. 渲染演员列表
    renderActor(list) {
        var actorsStr = '';
        list.forEach(function(item) {
            actorsStr += `  <li class="flex2 aic ml-10">
                            <img src="${item.avatarAddress}" class="image">
                            <p class="f12 lh15">于谦 </p>
                            <p class="f12 lh15 gray">苗宛秋</p>
                        </li> `;
        })
        document.querySelector('#actors').innerHTML = actorsStr;
    }
}

// 调用请求数据的函数
filmDetail.getDetail();